import React from 'react'
import _ from 'lodash'

import Card from '../../../../components/Card'
import Grid from '../../../../components/Grid'
import Progress from '../../../../components/Progress'
import Accordion from '../../../../components/Accordion'
import Benchmarking from '../../components/Benchmarking'

// Data
import {
  resOverviewData,
  resProgressData,
} from '../../data'

import styles from '../../styles.less'

const resAccordionHeader = [{
  title: '废矿物油综合利用项',
  header: (
    <div className={styles.header}>
      <div>
        <span>废矿物油综合利用项目</span>
      </div>
      {/* TODO change status */}
      <span className={styles.status}>已完成</span>
    </div>
  ),
  children: [{
    title: '行政区划',
    value: '绍兴市',
  }, {
    title: '项目规模',
    value: '5万吨/年'
  }, {
    title: '建设单位',
    value: '绍兴光之源环保有限公司'
  }, {
    title: '项目进度',
    value: '已完成'
  }]
}].map(item => {
  return _.merge(item, {
    isMore: true,
    url: '/App/responsibilityDetails'
  })
})

export default class ProjectItems extends React.Component {
  state = {
    resOverviewData: [],
    resProgressData: [],
  }

  componentDidMount() {
    this.getOverviewData()
    this.getProgressData()
  }

  getOverviewData = () => {
    this.setState({
      resOverviewData,
    })
  }

  getProgressData = () => {
    this.setState({
      resProgressData
    })
  }

  render() {
    const {
      resOverviewData,
      resProgressData,
    } = this.state

    return (
      <div className={styles.accordionHeader}>
        <Card
          title='工作报告总览'
          extra='绍兴市'
          showRight
          showPop
        >
          <Grid data={resOverviewData} />
        </Card>
        <Benchmarking />

        <Card
          title='责任列表'
          showRight
          icon='search'
        >
          <div className={styles.container + ' ' + styles.container_project}>
            {
              resProgressData.map(item => (
                <Progress
                  key={item.progress}
                  progress={item.progress}
                  progressColor={item.progressColor}
                />
              ))
            }
          </div>
        </Card>

        <Accordion data={resAccordionHeader} />
      </div>
    )
  }
}